<template>
  <div>
    <V-CommonHeaderLeft>
      <div class="commodityprice">
        <navigation :msg='navMsg'></navigation>
        <div class="commodityprice-top">
          <div @click="commodityprice(1)"
               :class="num == 1 ? 'gaoliang' : ''">销售价格</div>
          <div @click="commodityprice(2)"
               :class="num == 2 ? 'gaoliang' : ''">采购价格</div>
        </div>
        <CommodityPriceSale v-if="num == 1"></CommodityPriceSale>
        <CommodityPurchas v-if="num == 2"></CommodityPurchas>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>
<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import CommodityPriceSale from './commodityPriceSale/CommodityPriceSale'
import CommodityPurchas from './commodityPurchas/CommodityPurchas'
import navigation from '@/components/common/navigation/Navigation'

export default {
  data () {
    return {
      num: 1,
      navMsg: [
        {
          name: '商品',
          path: '/commodityList'
        }, {
          name: '商品价格',
          path: '/commodityPrice'
        }
      ]
    }
  },
  methods: {
    commodityprice (val) {
      this.num = val
    }
  },
  components: {
    CommodityPriceSale,
    VCommonHeaderLeft,
    CommodityPurchas,
    navigation
  }
}
</script>

<style lang="scss" scoped>
.commodityprice {
  width: 100%;
  margin: 0px 10px 0 0px;
  overflow: hidden;
  .commodityprice-top {
    background-color: #fff;
    display: flex;
    border-bottom: 1px #e3e3e3 solid;
    div:first-child {
      margin-left: 20px;
    }
    div {
      width: 106px;
      padding: 0 8px;
      font-size: 16px;
      letter-spacing: 2px;
      color: #999;
      height: 51px;
      line-height: 51px;
      text-align: center;
    }
    .gaoliang {
      color: #20ade5;
      font-weight: 600;
      border-bottom: 2px #20ade5 solid;
      height: 49px;
    }
  }
}
</style>
